@use "theme/index";
@use "root";
@use "../../@yk/styles";
@use "../../@yk/styles/template" as yk;
@use "loading";

body {
  background-color: #F2F3F5;
}

// region TODO 卡片
// TODO 白色卡片 class: c_card-white
.c_card-white {
  @include yk.yk_card-template;
  background-color: white;
  border-radius: 4px;
  padding: 12px;
  .c_card_header{
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: bold;
  }
  --card-body-height: calc(100% - 28px)
}
// TODO 页面卡片，用于管理端页面 class: c_card-page
.c_card-page {
  @include yk.yk_card-template;
  background-color: white;
  border-radius: 4px;
  padding: 20px 16px;
  .c_card_header{
    padding-bottom: 16px;
    font-size: 16px;
  }
  --card-body-height: calc(100% - 32px)
}
// endregion

// region TODO 表单（输入框/下拉框等）
// TODO  搜索表单 class: c_form-search
.el-form.c_form-search {
  .el-input {
    --el-input-bg-color: #F7F8FA;
    --el-input-border-color: transparent;
    --el-input-placeholder-color: var(--yk-color-secondary);
  }
  .el-date-editor {
    background-color: #F7F8FA;
    --el-input-border-color: transparent;
    .el-range-input::placeholder{
        color: var(--yk-color-secondary);
    }
  }
  .el-select {
    --el-select-width: 182px;
    --el-border-color: transparent;
    --el-fill-color-blank: #F7F8FA;
  }
}

// TODO 添加表单 class: c_form-save
.el-form.c_form-save {
  .el-input {
    width: 260px;
    .el-input__wrapper {
      width: inherit;
      flex-grow: unset;
    }
  }
  .el-select {
    --el-select-width: 260px;
  }
  .el-input-number {
    width: unset;
    .el-input {
      width: inherit;
    }
  }
  .el-date-editor--datetimerange {
    width: 360px;
    flex-grow: unset;
  }
}

// TODO 提交按钮或按钮组 class: c_form__submit-btn
.c_form__submit-btn {
  // {
  //  min-width: 0;
  //}
  button:not(.el-button-group button) {
    min-width: 100px;
  }
}

// TODO 表单项提醒 class: c_form-tip
.c_form-tip {
  color: #9E9E9E;
  font-size: 14px;
}
// endregion

// region TODO 输入框
.el-input.c_input-search {
  --el-input-bg-color: #F7F8FA;
  --el-input-border-color: transparent;
  --el-input-placeholder-color: var(--yk-color-secondary);
}
// endregion

// region TODO 按钮
// TODO 导出按钮 class: c_btn--export
.el-button.c_btn--export {
  --el-button-bg-color: #F7F8FA;
  --el-button-outline-color: transparent;
  border: unset;
  color: var(--el-text-color-primary);
}
// endregion

// region TODO 表格
// TODO 页面表格 class: c_table-page
.el-table.c_table-page {
  --el-table-header-bg-color: #F7F8FA;
  --el-table--striped-background: #F7F8FA;
  --el-table-header-height: 48px;
  --el-table-row-height: 48px;
  --el-table-header-text-color: var(--el-text-color-primary);
  .el-table__header .cell {
    font-weight: normal;
  }
}
.el-table.c_table-vertical {
  --el-table-header-height: 48px;
  --el-table-row-height: 48px;
  --el-table-header-text-color: var(--el-text-color-primary);
  .el-table__header .cell {
    font-weight: normal;
  }
  .el-table__row{
    .el-table__cell:first-child {
      background-color:#F7F8FA;
    }
  }
}


// 表格操作列
// TODO 表格的操作列，用于添加编辑等 class: c_table-operation
.c_table-operation {
  .el-link + .el-link {
    margin-left: 20px;
  }
}
// endregion

// region TODO 分页
// TODO 页面表格的分页 class: c_table-pagination-page
.c_table-pagination-page {
  display: flex;
  justify-content: flex-end;
  @extend .c_affix-bg-white;
}
// endregion

// region TODO 对话框
div:has(> .el-overlay-dialog):not(.el-overlay) {
  pointer-events: none;
  .el-dialog {
    pointer-events: all;
  }
}
// endregion

// region TODO 固钉
// TODO 固钉的白色背景板 class: c_affix-bg-white
.c_affix-bg-white {
  background: linear-gradient(to bottom,#FFFFFF00, #FFFFFF 16px);
  padding: 16px 0;
}
// endregion

// region TODO 抽屉 Drawer
// TODO 默认抽屉样式: c_drawer-default
.el-drawer.c_drawer-default {
  .el-drawer__header {
    margin-bottom: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--yk-color-divider);
    color: var(--el-text-color-primary);
  }
  .el-drawer__footer {
    border-top: 1px solid var(--yk-color-divider);
  }
}
// endregion

// region TODO 文本
.c_not-data_tip {
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-secondary);
  width: 100%;
  text-align: center;
  padding: 36px 0 8px;
}
// endregion

// region TODO Loading
.el-loading-parent--relative.is-loading-mask {
  .el-loading-mask {
    --el-mask-color: var(--el-overlay-color-lighter);
    .el-loading-spinner {
      display: none;
    }
  }
}
// endregion
